<div class="z-30 fixed h-screen w-full flex flex-col items-center justify-center bg-green-200 hidden"
:class="{'hidden': !$store.modal.visible}"
>
  {% embed "@organisms/container/container.twig" with {
    "width": 'large'
  }%}
    {% block content %}
      <div class="relative w-full" style="padding-top: 56.25%">
        <iframe name="youtube embed" allow="autoplay; encrypted-media" class="absolute inset-0 w-full h-full" x-bind:src="$store.modal.url" frameborder="0" allowfullscreen></iframe>
      </div>
    {% endblock %}
  {% endembed %}
  <div class="absolute top-8 right-8 cursor-pointer" @click="$store.modal.visible = false">
    {% include "@atoms/svg/svg.twig" with {
      "icon": 'close',
      "size": "w-6 h-6"
    } %}
  </div>
</div>
